<template>
	<view>
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar :title="form.name || '表单详情'" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<form @submit="formSubmit" bindreset="formReset" v-show="showPage">
			<view v-if="form.headType==1">
				<view class="banner">
					<image :src='slideImg[0]' mode='widthFix'></image>
				</view>
			</view>
			<!-- 轮播图 -->
			<view v-else-if="form.headType == 2">
				<u-swiper height="calc(350rpx * 6 / 6)" radius="0" :list="slideImg" :autoplay="autoplay" indicator
					indicatorMode="line" circular></u-swiper>
			</view>
			<view v-else-if="form.headType==3">
				<view class='video'>
					<video :src='form.headTypeVideo' :poster="form.headTypeValue"></video>
				</view>
			</view>
			<!-- 纯文字 -->
			<view v-if="form.description !=''">
				<view class='plaintext'>
					<text>{{form.description}}</text>
				</view>
			</view>
			<view class="coreshop-margin-bottom-10 coreshop-margin-top-10 coreshop-padding-10 coreshop-bg-white">
				<view v-for="(item,index) in form.items" :key="index">
					<view class='goods-box-item' v-if="item.type=='goods'">
						<view class='coreshop-flex coreshop-justify-between coreshop-padding-bottom-10'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<image class='goods-img' :src='item.good.image' mode='aspectFit'></image>
						<view class='goods-right'>
							<view class='goods-name'>{{item.good.name}}</view>
							<view class='goods-mid'>
								<text>已售{{item.good.buyCount}}</text>
							</view>
							<view class='goods-buttom'>
								<view class="goods-price">￥{{item.good.price}}</view>
								<view class='choose-specs' @click="specifications($event,item)" data-type='1'
									:data-goods="item.good.id" :data-id="item.id" data-statu="openspecs">
									选规格
								</view>
								<text class='order-num' v-if="item.cartCount> 0">{{item.cartCount || 0}}</text>
							</view>
						</view>
					</view>
					<!-- 文本框 -->
					<view class='form-input-box-item' v-if="item.type=='text'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<input class='ib-item-input' type="text" :name="'objName'+item.id" :data-id="item.id"
								v-model="item.defaultValue" :placeholder="'请输入'+item.name"></input>
						</view>
					</view>
					<!-- 日期 -->
					<view class='form-input-box-item' v-if="item.type=='date'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<view class="ib-item-mid">
								<picker mode="date" :name="'objName'+item.id" :value="item.defaultValue"
									@change="bindDateChange($event,item)" :data-id='item.id'>
									<view>{{item.defaultValue}}</view>
								</picker>
								<image class='icon-img-right'
									:src="$globalConstVars.apiFilesUrl+'/static/images/common/ic-unfold.png'"></image>
							</view>
						</view>
					</view>
					<!-- 时间 -->
					<view class='form-input-box-item' v-if="item.type=='time'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<view class="ib-item-mid">
								<picker class="weui-btn" :name="'objName'+item.id" mode="time"
									:value="item.defaultValue" @change="bindTimeChange($event,item)" :data-id='item.id'>
									<view>{{item.defaultValue}}</view>
								</picker>
								<image class='icon-img-right'
									:src="$globalConstVars.apiFilesUrl+'/static/images/common/ic-unfold.png'"></image>
							</view>
						</view>
					</view>
					<!-- 范围选择 -->
					<!-- 多选 -->
					<view class='form-input-box-item' v-if="item.type=='checbox'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<view class='checkout-list'>
								<checkbox-group @change="checkboxChange($event,item)" :data-value="item.id"
									:name="'objName'+item.id">
									<label class="checkout-item coreshop-padding-bottom-10"
										v-for="(checkboxItem,itemIndex) in item.checkboxValue" :key="itemIndex">
										<view class="checkout-item-c">
											<checkbox class="" :value="checkboxItem.value"
												:checked="checkboxItem.checked" /> {{checkboxItem.value}}
										</view>
									</label>
								</checkbox-group>
							</view>
						</view>
					</view>
					<!-- radio时处理 -->
					<view class='form-input-box-item' v-if="item.type=='radio'">
						<view class='input-box-item-left'>
							<text>{{item.name}}:</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<radio-group class="uni-list" @change="radioChange($event,item)" :data-value="item.id"
								:name="'objName'+item.id">
								<view class="coreshop-padding-bottom-10"
									v-for="(radioItem, itemIndex) in  item.radioValue" :key="itemIndex">
									<label class="coreshop-margin-right-40 coreshop-btn-all">
										<view class="coreshop-display-inline-block">
											<radio class="a-radio" :id="radioItem" :value="radioItem" checked=true
												v-if="radioItem==item.defaultValue"></radio>
											<radio class="a-radio" :id="radioItem" :value="radioItem"
												v-if="radioItem!=item.defaultValue"></radio>
										</view>
										<view class="coreshop-display-inline-block">
											<label class="label-2-text" :for="radioItem">
												<text>{{radioItem}}</text>
											</label>
										</view>
									</label>
								</view>
							</radio-group>
						</view>
					</view>
					<!-- 省市区选择 -->
					<view class='form-input-box-item' v-if="item.type=='area'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<view class="ib-item-mid">
								<input class="ib-item-input" :value="pickerValue" @focus="showThreePicker"
									:name="'objName'+item.id" style="width: 100%;" />
								<coreshop-select v-model="show" mode="mutil-column-auto" :list="pickerList"
									:default-value="pickerIndex" @confirm="onConfirm"></coreshop-select>
							</view>
						</view>
					</view>
					<!-- 金额 -->
					<view class='form-input-box-item' v-if="item.type=='money'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<view class="ib-item-mid">
								<input class='ib-item-input' type="digit" :name="'objName'+item.id"
									v-model="item.defaultValue" :placeholder="'请输入'+item.name"></input>
							</view>
						</view>
					</view>
					<!-- 密码 -->
					<view class='form-input-box-item' v-if="item.type=='password'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<view class="ib-item-mid">
								<input class='ib-item-input' type='password' :name="'objName'+item.id"
									v-model="item.defaultValue" :placeholder="'请输入'+item.name"></input>
							</view>
						</view>
					</view>
					<!-- 图片 -->
					<view class='form-input-box-item' v-if="item.type=='image'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：（限制3张）</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必传" size="mini"></u-button></view>
						</view>
						<view class='coreshop-margin-top-15'>
							<view class='upload-img-list'>
								<view class='upload-img-bd'>
									<view class='upload-img' v-for="(picItem, i) in item.pics" :key="i">
										<image @click='picDel(item,index,i)' :data-index="i" class='del-img'
											:src="$globalConstVars.apiFilesUrl+'/static/images/common/del.png'"></image>
										<image class='upload-camera' :src="picItem" mode='aspectFit'></image>
										<input type='text' hidden='hidden' :name="'objName'+item.id"
											v-model="item.pics" />
									</view>
								</view>
								<view class='upload-img-hd'>
									<image class='upload-camera'
										:src="$globalConstVars.apiFilesUrl+'/static/images/common/camera.png'"
										@click="picChoose($event,item,index)" :data-id="item.id"></image>
								</view>
							</view>
						</view>
					</view>
					<!-- 文本域 -->
					<view class='form-input-box-item' v-if="item.type=='textarea'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='coreshop-margin-top-15'>
							<textarea :name="'objName'+item.id" class='ib-item-textarea'
								:placeholder="'请输入'+item.name"></textarea>
						</view>
					</view>
					<!-- 定位 -->
					<view class='form-input-box-item' v-if="item.type=='coordinate'">
						<view class='input-box-item-left'>
							<text>{{item.name}}：</text>
							<view class="coreshop-width-fit-content" v-if="item.required"><u-button type="error"
									:plain="true" text="必选" size="mini"></u-button></view>
						</view>
						<view class='input-box-item-right'>
							<view class="ib-item-mid coreshop-justify-start">
								<image class='icon-img'
									:src="$globalConstVars.apiFilesUrl+'/static/images/common/ic-location.png'"></image>
								<input class='ib-item-input coreshop-margin-right-40' :name="'objName'+item.id"
									:value="item.defaultValue" disabled='disabled' placeholder="点击获取位置信息"
									@click="chooseLocation($event,item,index)" :data-id='item.id' />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='goods-bottom' v-if="form.type==1">
				<text class='coreshop-float-right coreshop-font-14 coreshop-text-black'>
					合计
					<text class='coreshop-text-red coreshop-font-30'>￥{{goodsTotalMoney}}</text>
				</text>
			</view>
			<view class="coreshop-tabbar-height"></view>
			<!-- 底部按钮 -->
			<view class='coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom'>
				<view class="coreshop-padding-10">
					<!--<u-button type="primary" :text="buttonName" :customStyle='{backgroundColor:form.buttonColor}' formType="submit" :disabled='submitStatus' :loading='submitStatus'></u-button>-->
					<button :customStyle='{backgroundColor:form.buttonColor}' class="bottom-btn" data-statu="open"
						form-type="submit" :disabled='submitStatus' :loading='submitStatus'>
						{{buttonName}}
					</button>
				</view>
			</view>
		</form>

		<!--弹出框-->
		<u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" height="70%" @close="closeModal"
			:closeable="true">
			<!-- 多规格商品弹出 -->
			<block v-if="showSpecs">
				<view class="coreshop-bg-white">
					<!--标题-->
					<view
						class="coreshop-text-black coreshop-text-center coreshop-margin-top-15 coreshop-margin-bottom-15 coreshop-font-lg coreshop-title-bar">
						<text>选择商品</text>
					</view>
					<!--内容区域-->
					<view class="coreshop-modal-content">
						<!--选择规格-->
						<view class="coreshop-common-view-box select">
							<!--商品信息-->
							<view class="coreshop-list menu-avatar">
								<view class="coreshop-list-item">
									<view class="coreshop-avatar radius lg"
										:style="[{backgroundImage:'url('+ goodsInfoImage +')'}] " />
									<view class="content">
										<view class="coreshop-text-price-view">
											<text class="coreshop-margin-right-10">{{goodsInfoName}}</text>
											<text class="coreshop-font-sm coreshop-text-gray">￥{{goodsInfoPrint}}</text>
										</view>
									</view>
								</view>
							</view>
							<!--规格数据-->
							<view class="coreshop-select-btn-list-box">
								<view class="coreshop-padding-bottom-10">
									<view class="select-item" v-for="(value,key) in goodsSpesDesc" :key="key">
										<text
											class='coreshop-text-black coreshop-margin-10  coreshop-solid-bottom coreshop-padding-bottom-10'>{{key}}</text>
										<view class='select-btn'>
											<button
												class="sku-btn coreshop-margin-5 coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between"
												:class='i.isDefault ? "selected" : "not-selected"'
												v-for="(i,itemIndex) in value" :key="itemIndex" :data-key="i.productId"
												:data-id="i.name" @click="selectSku">
												<u-avatar :src="i.image" size="25"
													class="coreshop-margin-right-10 coreshop-margin-top-10"
													style="margin-left: -10px;"></u-avatar>
												{{ i.name }}
											</button>
										</view>
									</view>
								</view>
								<!-- 库存 -->
								<view class="coreshop-text-black coreshop-padding-top-10 coreshop-padding-bottom-10">数量
								</view>
								<view class="select-btn">
									<u-number-box v-model="goodsNums" :min="0" :max="goodsInfoNumber"
										@change="valChange"></u-number-box>
								</view>
							</view>
						</view>
						<!--公共按钮-->
						<view class="coreshop-padding-15 coreshop-text-center">
							<u-button type="error" :plain="true" size="normal" @click='goodsAddCart'
								v-if="status">确定</u-button>
							<u-button type="default" size="normal" v-else>已售罄</u-button>
						</view>
					</view>
				</view>
			</block>
		</u-popup>


		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {

		data() {
			return {
				formBoxId: '',
				form: {
					headType: 1,
				},
				showPage: false,
				slideImg: [], //幻灯片广告数据
				region: ['湖南省', '怀化市', '鹤城区'],
				areaId: 431202,
				pickerValue: '',
				show: false,
				pickerList: this.$db.get("areaList"),
				province: this.$db.get("areaList"),
				pickerIndex: [0, 0, 0], // picker索引值
				provinceKey: -1, //省份id
				cityKey: -1, //市id
				areaKey: -1, //区域id
				pics: [], //图片
				goodsNums: 0,
				cart: [],
				currentKey: 0, //当前下单的商品的Key
				currentGoodsId: 0, //当前选中的商品ID
				goodsTotalMoney: '0.00', //商品总额
				originForm: [], //原始表单
				paymentType: '', //支付类型
				paymentType: '', //表单付款码||表单订单
				/** 商品信息*/
				goodsSpesDesc: '',
				productId: '',
				status: '',
				goodsInfoName: '',
				goodsInfoImage: '',
				goodsInfoPrint: '',
				goodsInfoNumber: '',
				selectGoodsId: '',
				selectId: '',
				showSpecs: false,
				submitStatus: false, //按钮状态
				shareUrl: this.$globalConstVars.shareUrl,
				bottomModal: false,
				buttonName: '',
			}
		},
		onLoad(options) {
			var id = options.id
			if (!id) {
				this.$u.toast('路径错误')
				return false
			}
			this.formBoxId = id
			this.$db.set('formBoxId', id)


		},
		mounted: function() {
			this.$nextTick(function() {
				this.getFormDetail();
			})
		},
		computed: {
			...mapState({
				hasLogin: state => state.hasLogin,
				userInfo: state => state.userInfo,
			}),
			hasLogin: {
				get() {
					return this.$store.state.hasLogin;
				},
				set(val) {
					this.$store.commit('hasLogin', val);
				}
			}
		},
		onShow() {},
		methods: {
			//倒查城市信息
			getFullPath(id, data) {
				for (var i = 0; i < data.length; i++) {
					if (id == data[i].value) {
						if (!data[i].children) {
							this.areaKey = i;
							return true;
						} else if (data[i].hasOwnProperty("children")) {
							if (data[i].children[0] && !data[i].children[0].children) {
								this.cityKey = i;
								return true;
							} else {
								this.provinceKey = i;
								return true;
							}
						}
					} else {
						if (data[i].hasOwnProperty("children")) {
							if (data[i].children[0] !== undefined) {
								if (data[i].children[0].hasOwnProperty("children")) {
									this.provinceKey = i;
								} else {
									this.cityKey = i;
								}
							}
							if (typeof data[i].children != 'undefined') {
								var res = this.getFullPath(id, data[i].children);
								if (res) {
									return true;
								}
							}
						}
					}
				}
			},
			init() {
				console.log(this.areaId);
				this.getFullPath(this.areaId, this.province);
				this.pickerIndex = [this.provinceKey, this.cityKey, this.areaKey];
				console.log(this.pickerIndex);
			},
			// 省市区联动初始化
			showThreePicker() {
				this.pickerValue = this.region[0] + ' ' + this.region[1] + ' ' + this.region[2];
				this.init();
				this.show = true;
			},
			onConfirm(e) {
				console.log(e);
				var that = this
				let provinceName = e[0].label;
				let cityName = e[1].label;
				let countyName = e[2].label;
				this.pickerValue = e[0].label + " " + e[1].label + " " + e[2].label
				let data = {
					provinceName: provinceName,
					cityName: cityName,
					countyName: countyName
				}
				let regionName = [provinceName, cityName, countyName];
				this.region = regionName;
				this.$u.api.getAreaId(data).then(res => {
					if (res.status) {
						that.areaId = res.data;
						that.init();
					} else {
						uni.showModal({
							title: '提示',
							content: '地区选择出现问题，请重新选择地区',
							showCancel: false
						});
					}
				});
				console.log(this.areaId);
			},
			getFormDetail() {
				var _this = this;
				var data = {
					id: this.formBoxId,
					token: this.$db.get('userToken')
				}
				var that = this
				this.$u.api.getFormDetial(data).then(res => {
					if (res.status) {
						this.form = res.data
						this.originForm = res.data
						this.buttonName = res.data.buttonName
						if (res.data.images) {
							this.slideImg = res.data.images.split(',');
						}
						if (res.data.type == 1 || res.data.type == 2) {
							if (res.data.type == 1) {
								//订单
								that.paymentType = this.$globalConstVars.paymentType.formOrder
							} else if (res.data.type == 2) {
								//付款码
								that.paymentType = this.$globalConstVars.paymentType.formPay
							}
						}
						console.log(that.paymentType);
						this.showPage = true;
					} else {
						//this.showPage = false;
						if (res.data.isExpires) {
							uni.showModal({
								title: '提示',
								content: '表单已过期，请扫描新的二维码',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										_this.$u.route({
											type: 'switchTab',
											url: '/pages/index/default/default'
										})
									}
								}
							})
						} else if (res.data.needLogin) {

							//_this.$refs.uToast.show({ message: '请登录！', type: 'error', back: false });

							uni.showModal({
								title: '提示',
								content: '您好，请先登录',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										_this.$u.route({
											type: 'switchTab',
											url: '/pages/index/member/member'
										})
									}
								}
							})
							//if (!this.hasLogin) {
							//    this.$store.commit('showLoginTip', true);
							//    return false;
							//}
						}
					}
				})
			},
			// 选择日期
			bindDateChange(e, item) {
				item.defaultValue = e.target.value
			},
			// 选择时间
			bindTimeChange(e, item) {
				item.defaultValue = e.target.value
			},
			// 单选
			radioChange(e, item) {
				item.defaultValue = e.detail.value
			},
			// 多选
			checkboxChange(e, item) {
				var values = e.detail.value
				for (var i = 0; i < item.checkboxValue.length; ++i) {
					const checkboxItem = item.checkboxValue[i]
					if (values.includes(checkboxItem.value)) {
						this.$set(checkboxItem, 'checked', true)
					} else {
						this.$set(checkboxItem, 'checked', false)
					}
				}
			},
			/* 输入框事件 */
			valChange(e) {
				this.num = e.value;
			},
			//选择位置
			chooseLocation(e, item, index) {
				var pages = getCurrentPages()
				var items = pages[0].$vm.form.items;
				var that = this;
				uni.chooseLocation({
					success(e) {
						item.defaultValue = e.latitude + ',' + e.longitude
						items[index] = item;
						setTimeout(() => {
							that.form.items = items;
						}, 500)
					},
					fail(e) {
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.userLocation']) {
									uni.openSetting()
								}
							}
						})
					}
				})
			},
			picChoose(e, item, index) {
				var that = this
				var items = this.form.items;
				if (!item.pics) {
					item.pics = []
				}
				if (item.pics.length >= 3) {
					that.$refs.uToast.show({
						message: "最多允许上传3张图片",
						type: 'error'
					})
					return false;
				}

				this.$upload.uploadImage(1, res => {
					if (res.status) {
						item.pics.push(res.data.src);
						items[index] = item;
						setTimeout(() => {
							that.form.items = items;
						}, 500)
						that.$refs.uToast.show({
							message: res.msg,
							type: 'success'
						})
					} else {
						that.$refs.uToast.show({
							message: res.msg,
							type: 'error'
						})
					}
				})

				console.log(item.pics);

			},
			//删除图片
			picDel(item, index, i) {
				item.pics.splice(i, 1)
				this.$set(this.form.items, index, item)
			},
			//表单提交
			formSubmit(e) {
				var that = this
				var data = e.detail.value
				var keys = Object.keys(data);
				var postData = [];
				keys.forEach(function(value, index) {
					var name = value;
					var id = name.replace('objName', '');
					let obj = {
						key: Number(id),
						value: data[name].toString()
					};
					postData.push(obj);
				})
				//订单时需要合并购物车信息

				console.log(this.cart);

				if (this.form.type == 1) {
					if (this.cart.length < 1) {
						this.$u.toast('请先选择商品')
						return true
					}
					var tempArray = []
					this.cart.map((mapItem) => {
						if (tempArray.length == 0) {
							let pushData = {
								key: mapItem.key,
								value: []
							}
							pushData.value.push(mapItem);
							tempArray.push(pushData)
						} else {
							//判断是否存在同名key的数据，进行累加
							let res = tempArray.some((item) => {
								if (item.key == mapItem.key) {
									item.value.push(mapItem)
									return true
								}
							})
							if (!res) {
								let pushData = {
									key: mapItem.key,
									value: []
								}
								pushData.value.push(mapItem);
								tempArray.push(pushData)
							}
						}
					})
					tempArray.forEach(function(item, index) {
						item.value = JSON.stringify(item.value);
						postData.push(item);
					})
				}
				console.log(data);
				console.log(postData);

				let userToken = this.$db.get('userToken')
				let obj = {
					data: postData,
					id: this.form.id,
					token: userToken
				}
				this.submitStatus = true;
				this.$u.api.addSubmitForm(obj).then(res => {
					this.submitStatus = false;
					if (res.status) {
						//表单类型判断是否需要支付，支付金额多少
						if (that.form.type == '1' || that.form.type == '2') {
							that.$refs.uToast.show({
								message: res.msg,
								type: 'success'
							});
							//跳转首页
							setTimeout(function() {
								//出来支付按钮
								that.$u.route({
									type: 'redirectTo',
									url: '/pages/payment/pay/pay?formId=' + res.data.formSubmitId +
										'&type=' + that.paymentType +
										'&recharge=' + res.data.money
								});
							}, 1000)
						} else {
							that.formReset()
							that.$refs.uToast.show({
								message: res.msg,
								type: 'success'
							})
							//跳转首页
							setTimeout(function() {
								wx.switchTab({
									url: '/pages/index/default/default'
								})
							}, 1500)
						}
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			//表单清空
			formReset(e) {
				this.$db.set('formBoxId', '')
				this.cart = [] //初始化，刷新当前页面
				this.form = this.originForm
			},
			closeModal() {
				this.bottomModal = false;
				this.showSpecs = false
			},
			//选择规格弹出
			specifications(e, item) {
				this.bottomModal = true;
				this.showSpecs = true
				this.selectId = e.target.dataset.id
				this.selectGoodsId = e.target.dataset.goods
				this.currentKey = e.target.dataset.id //当前选中的key
				this.currentGoodsId = e.target.dataset.goods //当前选中的商品ID
				this.getGoodsInfo(item)
			},
			//获取商品详情
			getGoodsInfo(item) {
				let goods = item.good
				this.goodsSpesDesc = this.$u.deepClone(goods.product.defaultSpecificationDescription);
				this.productId = goods.product.id
				this.goodsInfoName = goods.product.name
				this.goodsInfoImage = goods.product.images
				this.goodsInfoPrint = goods.product.price
				this.goodsInfoNumber = goods.product.stock
				this.goodsNums = this.getNumsByKey(this.currentKey, goods.product.id)
				this.status = goods.product.stock < 1 ? false : true
			},
			/*获取key的数量 */
			getNumsByKey(key, productId) {
				var that = this
				if (that.cart.length < 1) {
					return 0
				} else {
					for (var i = 0; i < that.cart.length; i++) {
						if (that.cart[i].key == key && that.cart[i].productId == productId) {
							return that.cart[i].nums
						}
					}
					return 0
				}
			},
			//加入购物车
			goodsAddCart: function() {
				var productId = this.productId
				var currentKey = this.currentKey
				console.log(productId);
				console.log(currentKey);
				if (this.cart.length < 1) {
					this.cart.push({
						key: currentKey,
						productId: productId,
						goodsId: this.selectGoodsId,
						nums: this.goodsNums,
						price: this.goodsInfoPrint
					})
				} else {
					var isIn = false
					for (var i = 0; i < this.cart.length; i++) {
						if (this.cart[i].key == currentKey && this.cart[i].productId == productId) {
							this.cart[i] = {
								key: currentKey,
								productId: productId,
								goodsId: this.selectGoodsId,
								nums: this.goodsNums,
								price: this.goodsInfoPrint
							}
							isIn = true
						}
					}
					if (!isIn) {
						this.cart.push({
							key: currentKey,
							productId: productId,
							goodsId: this.selectGoodsId,
							nums: this.goodsNums,
							price: this.goodsInfoPrint
						})
					}
				}

				this.closeModal();
				this.getCartNums()
			},
			getCartNums() {
				var items = this.form.items
				var itemKey = ''
				for (var i = 0, len = items.length; i < len; ++i) {
					if (items[i].id == this.currentKey) {
						itemKey = i
					}
				}
				var that = this
				if (this.form.items[itemKey].good.id == this.currentGoodsId) {
					if (this.form.items[itemKey].cartCount > 0) {
						var cartCount = 0
						var currentKey = this.currentKey
						this.cart.forEach(function(item, index, input) {
							if (item.key == currentKey) {
								cartCount += item.nums
							}
							that.form.items[itemKey].cartCount = cartCount
						})
					} else {
						this.form.items[itemKey].cartCount = this.goodsNums
					}
				} else {
					this.form.items[itemKey].cartCount = this.goodsNums
				}
				this.getGoodsTotalMoney()
			},
			//获取商品总额
			getGoodsTotalMoney() {
				var that = this
				var goodsTotalMoney = 0
				this.cart.forEach(function(item, index, input) {
					goodsTotalMoney += item.price * item.nums
				})
				this.goodsTotalMoney = this.$common.formatMoney(goodsTotalMoney, 2, '')
			},
			getSpes: function(product) {
				if (!product.defaultSpecificationDescription) {
					return []
				}
				return product.defaultSpecificationDescription
			},
			//获取规格信息
			selectSku(e) {
				var id = e.target.dataset.key
				this.$u.api.getProductInfo({
					id
				}).then(res => {
					if (res.status) {
						this.goodsSpesDesc = this.$u.deepClone(res.data.defaultSpecificationDescription);
						this.productId = res.data.id
						this.goodsInfoName = res.data.name
						this.goodsInfoImage = res.data.images
						this.goodsInfoPrint = res.data.price
						this.goodsInfoNumber = res.data.stock
						this.goodsNums = this.getNumsByKey(this.currentKey, res.data.id)
						this.status = res.data.stock < 1 ? false : true
					}
				})
			},
			//获取分享URL
			getShareUrl() {
				let data = {
					client: this.$globalConstVars.shareClient.wxMiNiProgram,
					url: this.$globalConstVars.shareUrl,
					type: this.$globalConstVars.shareModel.url,
					page: this.$globalConstVars.shareType.form,
					params: {
						id: this.formBoxId
					}
				};
				let userToken = this.$db.get('userToken');
				if (userToken && userToken != '') {
					data.token = userToken
				}
				this.$u.api.share(data).then(res => {
					this.shareUrl = res.data
				});
			}
		},
		watch: {
			formBoxId: {
				handler() {
					this.getShareUrl();
				},
				deep: true
			}
		},
		//分享
		onShareAppMessage(res) {
			return {
				title: this.form.name,
				path: this.shareUrl
			}
		},
		onShareTimeline(res) {
			return {
				title: this.form.name,
				path: this.shareUrl
			}
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	@import 'details.scss';
</style>